<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title data-i18n-content>default_title</title>
<link href="options.css" rel="stylesheet" />
</head>
<body>
<article class="wrapper">
  <header class="wrapper-header">
    <img src="images/48.png" alt="logo">
    <span data-i18n-content>default_title</span>
  </header>
  <section class="wrapper-body">
    <!-- Switch configuration section start  -->
    <article id="switches-setting-wrapper" class="switches-setting-wrapper">
      <section class="shortcut-name-and-path">
        <div id="shortcut-icon-wrapper" title="click_to_change_icon" data-i18n-attr="title">
          <span>
            <img data-icon-id="default" data-icon-file="default" data-icon-index="0" id="shortcut-icon" alt="Chrome">
          </span>
          <span class="change-icon-link" data-i18n-content>change_icon</span>
        </div>
        <div>
          <label for="shortcut-name" data-i18n-content>shortcut_name</label>
          <input type="text" id="shortcut-name" autofocus="true">
        </div>
        <div>
          <label for="shortcut-path" data-i18n-content>shortcut_path</label>
          <span id="shortcut-path">
            <span id="shortcut-path-val" data-path-value="" class="text-overflow-ellipsis"></span>
            <div class="drop-down-arrow">
              <img src="images/drop-down-arrow.png" alt="drop down">
            </div>
          </span>
        </div>
        <div id="theme-selection-wrapper">
          <label for="chose-theme" data-i18n-content>select_theme</label>
          <img id="thumbnail-of-theme" class="default-theme" title="Classic" data-theme-id="classic" data-theme-url="" src="images/theme_thumbs/thumb_classic_sm.jpg" >
          <button id="change-theme" data-i18n-content>change_theme</button>
          <div class="theme-apply-hint" data-i18n-content>theme_apply_hint</div>
        </div>
      </section>
      <section>
        <header id="advanced-switch-header">
          <img src="images/hide.png" >
          <span data-i18n-content >advanced_setting</span>
        </header>
        <section id="user-data-path-section">
          <div class="user-data-path-wrapper">
            <label for="user-data-dir" data-i18n-content>user_data_path</label>
            <input id="user-data-dir" type="text" >
            <button id="select-user-data-dir-btn" data-i18n-content>select_user_data_path_btn</button>
          </div>
        </section>
        <section id="advanced-switch-wrapper">
          <form id="add-switch-form">
            <div id="add-switch-wrapper">
              <label for="add-switch-field" data-i18n-content>add_more_switches</label>
              <input type="text" id="add-switch-field" placeholder="add_new_switch" data-i18n-attr="placeholder">
              <button id="add-switch-btn" data-i18n-content>add</button>
            </div>
          </form>
          <ul id="added-switch-list"></ul>
        </section>
      </section>
    </article>
    <!-- Switch configuration section end -->
    <!-- Welcome section start -->
    <article id="welcome-section" class="switches-initial">
      <section class="switches-initial-description">
        <div>
          <h1 class="initial-title" data-i18n-content>welcome</h1>
        </div>
        <div>
          <label for="shortcut-path" data-i18n-content>can_create_and_manage_shortcuts</label>
        </div>
        <div>
          <label for="chose-theme" data-i18n-content>you_can</label>
        </div>
        <div>
          <ul>
            <li data-i18n-content>save_user_data_in_different_path</li>
            <li data-i18n-content>sign_in_same_website_with_different_account</li>
            <li data-i18n-content>install_different_extensions</li>
            <li data-i18n-content>install_different_theme</li>
          </ul>
        </div>
        <div>
          <button id="create-shortcut-btn" data-i18n-content>create_shortcut</button>
          <button id="import-shortcut-btn" data-i18n-content>import_shortcut</button>
        </div>
      </section>
    </article>
    <!-- Welcome section end -->
    <!-- Shortcut list section start -->
    <article id="shortcut-list-wrapper" class="switches-lists">
      <ul id="shortcut-list"></ul>
    </article>
    <!-- Shortcut list section end -->
  </section>
  <footer class="main-footer">
    <button id="startup-btn" data-i18n-content>startup</button>
    <button id="save-btn" data-i18n-content>save</button>
    <button id="setting-cancel-btn" data-i18n-content>cancel</button>
    <span id="create-shortcut-link" class="list-link" data-i18n-content>create_shortcut</span>
    <span id="import-shortcut-link" class="list-link" data-i18n-content>import_shortcut</span>
  </footer>
</article>

<!-- Icon change dialog start -->
<article id="icon-change-wrapper" class="popup">
  <header id="icon-change-header" class="popup-header" data-i18n-content>change_icon_header</header>
  <section id="icon-change-body" class="popup-body">
    <section id="more-icon-selection-wrapper"><a id="more-icon-selection-link" data-i18n-content>more_icons</a></section>
    <section id="icon-selection-wrapper">
      <div id="icon-selection-area">
        <img src="shortcut_icons/default.png" alt="icon" data-icon-id="default" >
        <img src="shortcut_icons/alerts.png" alt="icon" data-icon-id="alerts" >
        <img src="shortcut_icons/android.png" alt="icon" data-icon-id="android" >
        <img src="shortcut_icons/blogger.png" alt="icon" data-icon-id="blogger" >
        <img src="shortcut_icons/buzz.png" alt="icon" data-icon-id="buzz" >
        <img src="shortcut_icons/chrome_web_store.png" alt="icon" data-icon-id="chrome_web_store" >
        <img src="shortcut_icons/code.png" alt="icon" data-icon-id="code" >
        <img src="shortcut_icons/docs.png" alt="icon" data-icon-id="docs" >
        <img src="shortcut_icons/ebooks.png" alt="icon" data-icon-id="ebooks" >
        <img src="shortcut_icons/googlemail.png" alt="icon" data-icon-id="googlemail" >
        <img src="shortcut_icons/maps_api.png" alt="icon" data-icon-id="maps_api" >
        <img src="shortcut_icons/mobile.png" alt="icon" data-icon-id="mobile" >
        <img src="shortcut_icons/music.png" alt="icon" data-icon-id="music" >
        <img src="shortcut_icons/phone.png" alt="icon" data-icon-id="phone" >
        <img src="shortcut_icons/picasa.png" alt="icon" data-icon-id="picasa" >
        <img src="shortcut_icons/picnik.png" alt="icon" data-icon-id="picnik" >
        <img src="shortcut_icons/rss.png" alt="icon" data-icon-id="rss" >
        <img src="shortcut_icons/toolbar.png" alt="icon" data-icon-id="toolbar" >
        <img src="shortcut_icons/websearchfeatures.png" alt="icon" data-icon-id="websearchfeatures" >
        <img src="shortcut_icons/youtube.png" alt="icon" data-icon-id="youtube" >
      </div>
    </section>
  </section>
  <footer class="popup-footer">
    <button id="icon-selection-btn" data-i18n-content>ok</button>
    <button id="icon-selection-cancel-btn" data-i18n-content>cancel</button>
  </footer>
</article>
<!-- Icon change dialog end -->

<!-- Theme change dialog start -->
<article id="theme-change-wrapper" class="popup">
  <header id="theme-change-header" class="popup-header" data-i18n-content>change_theme_header</header>
  <section id="theme-change-body" class="popup-body">
    <ul id="theme-selection-area"></ul>
    <div class="mask"></div>
  </section>
  <footer id="theme-change-footer" class="popup-footer">
    <button id="theme-selection-btn" data-i18n-content>ok</button>
    <button id="theme-selection-cancel-btn" data-i18n-content>cancel</button>
  </footer>
</article>
<!-- Theme change dialog end -->

<div id="overlay"></div>
<div id="tip" class="tip"></div>
<div id="field-tip-wrapper" class="tip"><div id="field-tip"></div></div>
<article id="shortcut-deletion-confirmation-wrapper" class="popup">
  <header class="popup-header" data-i18n-content>delete</header>
  <section>
    <img class="prompt-img" src="images/prompt.png" alt="prompt">
    <label data-i18n-content>shortcut_confirm_to_delete</label>
  </section>
  <footer class="popup-footer">
    <input type="checkbox" id="also-delete-shortcut-cb">
    <label for="also-delete-shortcut-cb" data-i18n-content>also_delete_shortcut_and_user_data</label>
    <button id="delete-shortcut-btn" data-i18n-content>yes</button>
    <button id="cancel-delete-shortcut-btn" data-i18n-content>no</button>
  </footer>
</article>
<div id="templates">
  <div id="shortcut-item-template">
    <div class="shortcut-info">
      <img class="shortcut-icon">
      <span class="shortcut-name"></span>
      <div class="shortcut-options">
        <img src="images/edit.png" class="edit-icon" title="edit_shortcut" data-i18n-attr="title">
        <img src="images/delete.png" class="delete-icon" title="delete_shortcut" data-i18n-attr="title">
      </div>
    </div>
  </div>
  <div id="advanced-switch-item-template">
    <span class="switch-item"></span>
    <span class="delete-switch" data-i18n-content>delete</span>
  </div>
</div>
<embed id="plugin" width="0" height="0" type="application/x-switch"></embed>
<script src="js/switch_util.js"></script>
<script src="js/rock.js"></script>
<script src="js/i18n.js"></script>
<script src="js/tip.js"></script>
<script src="js/fs.js"></script>
<script src="js/shortcuts_storage.js"></script>
<script src="js/shortcut_path_storage.js"></script>
<script src="js/shortcut_icon_storage.js"></script>
<script src="js/switches.js"></script>
<script src="js/options.js"></script>
<script src="js/welcome.js"></script>
<script src="js/shortcut_list.js"></script>
<script src="js/shortcut_setting.js"></script>
<script src="js/shortcut_base_info.js"></script>
<script src="js/shortcut_icon.js"></script>
<script src="js/shortcut_theme.js"></script>
<script src="js/advanced_setting.js"></script>
<script src="js/droplist.js"></script>
<script>
  Manager.setup();
</script>
</body>
</html>
